<template>
  <view class="cu-modal bottom-modal" :class="share_flag?'show':''" @click="handleCloseShareDialog">
    <view class="cu-dialog" @click.stop="">
      <view class="flex justify-around" style="padding: 28upx 20upx;">
        <view class="flex flex-direction justify-around" @click="handleShareWx()">
          <image src="/static/icon/detail/share_icon_weixin@2x.png" style="width: 116upx; height: 116upx; border-radius: 50%; margin-bottom: 20upx;"></image>
          <view style="font-size: 26upx; color: #333333;">微信</view>
        </view>
        <view class="flex flex-direction justify-around" @click="handleShareQQ()">
          <image src="/static/icon/detail/share_icon_qq@2x.png" style="width: 116upx; height: 116upx; border-radius: 50%; margin-bottom: 20upx;"></image>
          <view style="font-size: 26upx; color: #333333;">QQ</view>
        </view>
        <view class="flex flex-direction justify-around" @click="handleShareFriendsCircle()">
          <image src="/static/icon/detail/share_icon_pengyouquan@2x.png" style="width: 116upx; height: 116upx; border-radius: 50%; margin-bottom: 20upx;"></image>
          <view style="font-size: 26upx; color: #333333;">朋友圈</view>
        </view>
      </view>
      <view class="flex justify-center align-center" style="width: 100%; height: 80upx; background-color: white;" @click="handleCloseShareDialog">取消</view>
    </view>
  </view>
</template>

<script>
export default {
  props:{
    share_flag: {
      type: Boolean,
    },
    article_id:{
      type: String || Number,
    },
    product_id:{
      // type: String || Number,
    },
    article_title:{
      type: String,
    },
    intro:{
      type: String,
    },
    herf:{
      type: String,
    },
    article_img:{
      type: String,
    }
  },
  name: 'shareDialog',
  methods:{
    handleCloseShareDialog(){
      this.$emit('handleCloseShareDialog')
    },
    //分享微信
    handleShareWx(){
      uni.share({
        provider: "weixin",
        scene: "WXSceneSession",
        title: this.article_title,
        imageUrl: this.article_img,
        summary: this.intro,
        href: `${this.$cbdh5url}${this.herf}?article_id=${this.article_id}&product_id=${this.product_id}`,
        type: 0,
        success: (res)=> {
          console.log("success:" + JSON.stringify(res));
        },
        fail: (err)=> {
          console.log("fail:" + JSON.stringify(err));
        }
      });
    },
    //分享朋友圈
    handleShareFriendsCircle(){
      uni.share({
        provider: "weixin",
        scene: "WXSenceTimeline",
        title: this.article_title,
        imageUrl: this.article_img,
        summary: this.intro,
        href: `${this.request_url}${this.herf}?article_id=${this.article_id}&product_id=${this.product_id}`,
        type: 0,
        success: (res)=> {
          console.log("success:" + JSON.stringify(res));
        },
        fail: (err)=> {
          console.log("fail:" + JSON.stringify(err));
        }
      });
    },
    //分享到QQ
    handleShareQQ(){
      uni.share({
        provider: "qq",
        type: 0,
        title: this.article_title,
        imageUrl: this.article_img,
        summary: this.intro,
        href: `${this.request_url}${this.herf}?article_id=${this.article_id}&product_id=${this.product_id}`,
        success: (res)=> {
          console.log("success:" + JSON.stringify(res));
        },
        fail: (err)=> {
          console.log("fail:" + JSON.stringify(err));
        }
      });
    },
  },
}
</script>

<style scoped>

</style>
